import React from 'react';

import button from '../img/material/button.png'
import img2 from '../img/material/img2.png'

require('../css/FacialmaskMaterial.css');
class FacialmaskMaterial extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
	        
	    }
	}
	componentWillMount(){

	}
    closeCover() {
        document.getElementsByClassName('fm-material')[0].style.display = 'none';
        this.props.callbackParent();
    }
    render() {
        return (
          <div className="fm-material">
              <div className="fm-material-cover"> 
              </div>
              <div className="fm-material-title">
                  <div className="fm-material-title-word">
                      原料知多点
                  </div>
                  <div className="fm-material-title-circleLeft">
                      <div className="fm-material-title-line"></div>  
                  </div>
                  <div className="fm-material-title-circleRight">
                      <div className="fm-material-title-line"></div>
                  </div>
                  <div className="fm-material-title-button" onClick={this.closeCover.bind(this)}>
                      <img src={button}/>
                  </div>
              </div>
              <div className="fm-material-content">
                  <div className="fm-material-content-circleLeft">
                      <div className="fm-material-content-line"></div>  
                  </div>
                  <div className="fm-material-content-circleRight">
                      <div className="fm-material-content-line"></div>
                  </div>
                  <div className="fm-material-content-scroll">
                  {
                      this.props.words.map(function(item, index) {
                        return (
                            <div className="fm-material-content-area" key={index}>
                                <div className="fm-material-content-area-title">
                                    <div className="fm-material-content-area-title-img"><img src={img2}/></div>
                                    <div className="fm-material-content-area-title-word">{item.title}</div>
                                    <div className="clear"></div>
                                </div>
                                <div className="fm-material-content-area-word">
                                    {item.description}
                                </div>
                            </div>
                        )
                      },this)
                  }
                  </div>
              </div>
          </div>
        )
    }
}


export default FacialmaskMaterial;